$(function () {

    /*用.each()遍历的方法，完成添加*/
    /*适用于  非数组  的json添加*/
    $.ajax({
        type:"GET",
        url:"./item.json" ,//非数组的JSON
        dataType:"json",
        cache:false,   //清除缓存
        success:function (data) {
            /* 注意 传参 的方式 */
            $.each(data,function (index,obj) {
                /* 用 append（） 直接添加在#box里 */
                $("#box").append(
                    "<div class='obj'>" +
                    "<div class='name'>" + obj.name + "</div>" +
                    "<div class='sex'>" + obj.sex + "</div>" +
                    "<div class='age'>" + obj.age + "</div>" +
                    "</div>"
                )
            })
        },
        error:function () {
            alert("error!")
        }
    });

    /*用创建盒子，并添加在父盒子下的方法*/
    /*适用于  有数组  的json添加*/
    $.ajax({
        type:"GET",
        url:"./item2.json", //数组JSON
        dataType:"json",
        cache:false,   //清除缓存
        success:function (data2) {
            /* 定义 */
            let length=data2.user.length;
            var outbox=document.getElementById("box2");
            var objbox=[];
            var namebox=[];
            var sexbox=[];
            var agebox=[];
            for( let i = 0;i < length;i++ )
            {
                /*创建盒子*/
                objbox[i]=document.createElement("div");
                namebox[i]=document.createElement("div");
                sexbox[i]=document.createElement("div");
                agebox[i]=document.createElement("div");
                /*给盒子加上选择器*/
                objbox[i].className="obj";
                namebox[i].className="name";
                sexbox[i].className="sex";
                agebox[i].className="age";
                /*将盒子放到对应的父盒子下*/
                outbox.appendChild(objbox[i]);
                objbox[i].appendChild(namebox[i]);
                objbox[i].appendChild(sexbox[i]);
                objbox[i].appendChild(agebox[i]);
                /*给盒子里的参数赋值*/
                namebox[i].innerHTML=(data2.user[i].name);
                sexbox[i].innerHTML=(data2.user[i].sex);
                agebox[i].innerHTML=(data2.user[i].age);
            }
        },
        error:function () {
            alert("error!")
        }
    })
});